{% load static %}
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="baidu-site-verification" content="5wQk2Z1cpF" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description"
          content="A layout example with a side menu that hides on mobile, just like the Pure website.">
    <title>CXY's blog</title>

    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css"
          integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!--[if lte IE 8]>
            <link rel="stylesheet" href="/combo/1.18.13?/css/layouts/side-menu-old-ie.css">
        <![endif]-->
    <!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="{% static 'Post/css/single.css' %}">
    <link rel="stylesheet" href="{% static 'Post/css/highlights/github.css' %}">
    <!--<![endif]-->
    <!--[if lt IE 9]>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
    <script>
        (function () {
            var bp = document.createElement('script');
            var curProtocol = window.location.protocol.split(':')[0];
            if (curProtocol === 'https') {
                bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
            }
            else {
                bp.src = 'http://push.zhanzhang.baidu.com/push.js';
            }
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(bp, s);
        })();

        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?a59b42ad110049cd199c938ceb21f30d";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();

        (function (i, s, o, g, r, a, m) {
            i['GoogleAnalyticsObject'] = r;
            i[r] = i[r] || function () {
                (i[r].q = i[r].q || []).push(arguments)
            }, i[r].l = 1 * new Date();
            a = s.createElement(o),
                m = s.getElementsByTagName(o)[0];
            a.async = 1;
            a.src = g;
            m.parentNode.insertBefore(a, m)
        })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');

        ga('create', 'UA-41480445-1', 'purecss.io');
        ga('send', 'pageview');
    </script>
</head>
<body>


<div id="layout">
    <!-- Menu toggle -->
    <a href="#menu" id="menuLink" class="menu-link">
        <!-- Hamburger icon -->
        <span></span>
    </a>

    <div id="menu">
        <div class="pure-menu">
            <a class="pure-menu-heading" href="{% url 'Post:list' %}">
                <img width="48" height="48" class="menu-avatar"
                     src="{% static 'Post/img/favicon.jpg' %}">
            </a>

            <ul class="pure-menu-list">
                <li class="pure-menu-item"><a href="{% url 'Post:list' %}" class="pure-menu-link">Home</a></li>
                {#                <li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>#}
                {##}
                {#                <li class="pure-menu-item menu-item-divided pure-menu-selected">#}
                {#                    <a href="#" class="pure-menu-link">Services</a>#}
                {#                </li>#}
                {##}
                {#                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>#}
            </ul>
        </div>
    </div>

    <div id="main">
        <div class="header">
            <h1>{{ post.title }}</h1>
            <h2 class="category">
                <i class="fa fa-book fa-fw"></i>
                {{ post.category.name }}
            </h2>
        </div>

        <div class="content">
            {{ post.body | safe }}
        </div>

        <div class="comment-box">
            <form class="pure-form comment" method="post" action="{% url 'comment:comment' pk=post.id %}">
                <fieldset class="pure-group">
                    昵称：<input class="pure-input-1-4" name="comment-name" type="text" placeholder="昵称">
                    &nbsp;&nbsp;
                    邮箱：<input class="pure-input-1-3" name="comment-email" type="email" placeholder="留下邮箱，可以收到回复提醒哦～">
                </fieldset>
                <textarea class="comment-content" name="comment" placeholder="想对作者说点什么。。。"
                          onfocus="show_person_info(this)"></textarea>
                <div class="comment-div">
                    <span id="tip_comment">支持markdown格式</span>
                    <button class="pure-button" type="submit" href="#">发表评论</button>
                </div>
            </form>
            <div class="comment-list-box">
                <h2>评论</h2>

                {% for comment in comment_list %}
                    <ul class="comment-list ">
                        <li class="comment-li first-comment" onmouseover="show_reply(this)"
                            onmouseleave="hidden_replay(this)">
                            <i class="fa fa-user-circle"></i>
                            <span>{{ comment.name }}：</span>
                            <a class="reply" href='javascript:void(0);' onclick="show_replyform(this)">回复</a>
                            <div class="comment-info">{{ comment.text | safe }}</div>

                            <form class="pure-form reply-form" id="reply-form" method="post"
                                  action="{% url 'comment:comment' pk=post.id %}">

                                <input hidden name="reply_to" value="{{ comment.id }}">
                                <input hidden name="reply_name" value="{{ comment.name }}">
                                <input hidden name="root_to" value="{{ comment.id }}">
                                <input hidden name="reply_email" value="{{ comment.email }}">
                                <fieldset class="pure-group">
                                    昵称：<input class="pure-input-1-4" name="comment-name" type="text" placeholder="昵称">
                                    &nbsp;&nbsp;
                                    邮箱：<input class="pure-input-1-3" name="comment-email" type="email"
                                              placeholder="留下邮箱，可以收到回复提醒哦～">
                                </fieldset>
                                <textarea class="comment-content" name="comment" onblur="hidden_replyform(this)"
                                          placeholder="想对作者说点什么。。。"></textarea>
                                <div class="comment-div">
                                    <span id="tip_comment">支持markdown格式</span>
                                    <button class="pure-button" type="submit" href="#">发表评论</button>
                                </div>
                            </form>

                        </li>
                        {% for reply in comment.replies %}
                            <li class="comment-li reply-comment" onmouseover="show_reply(this)"
                                onmouseleave="hidden_replay(this)">
                                <i class="fa fa-user-circle"></i>
                                <span>{{ reply.name }}回复{{ reply.reply_name }}: </span>
                                <a class="reply" href='javascript:void(0);' onclick="show_replyform(this)">回复</a>
                                <div class="comment-info">{{ reply.text | safe }}</div>

                                <form class="pure-form reply-form" method="post"
                                      action="{% url 'comment:comment' pk=post.id %}">
                                    <input hidden name="reply_to" value="{{ reply.id }}">
                                    <input hidden name="reply_name" value="{{ reply.name }}">
                                    <input hidden name="root_to" value="{{ comment.id }}">
                                    <input hidden name="reply_email" value="{{ reply.email }}">
                                    <fieldset class="pure-group">
                                        昵称：<input class="pure-input-1-4" name="comment-name" type="text"
                                                  placeholder="昵称">
                                        &nbsp;&nbsp;
                                        邮箱：<input class="pure-input-1-3" name="comment-email" type="email"
                                                  placeholder="留下邮箱，可以收到回复提醒哦～">
                                    </fieldset>
                                    <textarea class="comment-content" name="comment" onblur="hidden_replyform(this)"
                                              placeholder="想对作者说点什么。。。"></textarea>
                                    <div class="comment-div">
                                        <span id="tip_comment">支持markdown格式</span>
                                        <button class="pure-button" type="submit" href="#">发表评论</button>
                                    </div>
                                </form>

                            </li>
                        {% endfor %}
                    </ul>
                {% endfor %}
            </div>
        </div>

    </div>
</div>


<script src="{% static 'Post/js/single-js.js' %}"></script>

</body>
</html>
